<template>
  <div class="component_wrap">
    <!--省-->
    <el-select
      v-model="pickvalue.province"
      placeholder="全部"
      clearable
      filterable
      default-first-option
      :size="size"
      value-key="provinceID"
      class="mr10"
      @change="changeProvince"
      @clear="clear(0)"
    >
      <el-option
        v-for="item in provinceList"
        :key="item.provinceID"
        :label="item.provinceName"
        :value="item"/>
    </el-select>
    <!--市-->
    <el-select
      v-model="pickvalue.city"
      filterable
      default-first-option
      :size="size"
      value-key="cityID"
      placeholder="全部"
      class="mr10"
      clearable
      @clear="clear(1)"
      @change="changeCity"
    >
      <el-option
        v-for="item in cityList"
        :key="item.cityID"
        :label="item.cityName"
        :value="item"/>
    </el-select>
    <!--地域-->
    <el-select
      v-model="pickvalue.area"
      filterable
      default-first-option
      placeholder="全部"
      :size="size"
      value-key="areaID"
      clearable
      @clear="clear('area')"
      @change="changeArea"
    >
      <el-option
        v-for="item in areaList"
        :key="item.areaID"
        :label="item.areaName"
        :value="item"/>
    </el-select>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, PropType } from 'vue'
import { getProvince, getCity, getArea, Province, City, Area, Addr } from './api'

enum AddrType {
  province,
  city
}

export default defineComponent({
  name: 'AddrSelector',
  props: {
    modelValue: {
      type: Object as PropType<Addr>,
      default: () => { return {} }
    },
    size: {
      type: String as PropType<string>,
      default: 'small'
    }
  },
  emits: ['update:modelValue', 'change'],
  setup(props, ctx) {
    const provinceList = reactive<Array<Province>>([])
    const cityList = reactive<Array<City>>([])
    const areaList = reactive<Array<Area>>([])
    const currentValue = reactive(props.modelValue)
    const pickvalue = reactive<{
      province: any,
      city: any,
      area: any
    }>({
      province: {
        provinceID: '',
        provinceName: ''
      },
      city: {
        cityID: '',
        cityName: ''
      },
      area: {
        areaID: '',
        areaName: ''
      }
    })
    // 城市
    function changeProvince() {
      const provinceId = pickvalue.province.provinceID
      if (provinceId) {
        getCity({ provinceId: provinceId })
          .then(data => {
            const list = data.data || []
            list.shift()
            cityList.splice(0, cityList.length)
            cityList.push(...list)
          })
        changeData(AddrType.province)
      }
    }
    function changeCity() {
      const cityId = pickvalue.city.cityID
      if (cityId) {
        getArea({ cityId })
          .then(data => {
            const list = data.data || []
            list.shift()
            areaList.splice(0, areaList.length)
            areaList.push(...list)
          })
        changeData(AddrType.city)
      }
    }
    function changeData(type: AddrType) {
      if (AddrType.province === type) {
        cityList.splice(0, cityList.length)
        pickvalue.city = {}
        pickvalue.city = {}
        areaList.splice(0, areaList.length)
        pickvalue.area = {}
        pickvalue.area = {}
      } else if (AddrType.city === type) {
        areaList.splice(0, areaList.length)
        pickvalue.area = {}
        pickvalue.area = {}
      }
      emit()
    }
    function emit() {
      const province = pickvalue.province
      const city = pickvalue.city
      const area = pickvalue.area
      const data = {
        provinceID: province.provinceID || '',
        cityID: city.cityID || '',
        areaID: area.areaID || '',
        provinceName: province.provinceName || '',
        cityName: city.cityName || '',
        areaName: area.areaName || ''
      }
      currentValue.provinceID = data.provinceID
      currentValue.cityID = data.cityID
      currentValue.areaID = data.areaID
      currentValue.provinceName = data.provinceName
      currentValue.cityName = data.cityName
      currentValue.areaName = data.areaName
      ctx.emit('update:modelValue', currentValue)
      ctx.emit('change', data)
    }
    // 获取省列表
    getProvince()
      .then(data => {
        const list = (data.data || [])
        list.shift()
        provinceList.push(...list)
      })
    return {
      provinceList,
      pickvalue,
      cityList,
      areaList,
      changeProvince,
      changeCity,
      changeData,
      clear: function(type) {
        changeData(type)
      },
      changeArea: function() {
        if (pickvalue.area.areaID) emit()
      }
    }
  }

})
</script>
<style lang="less" scoped>
.mr10 {
  margin-right: 10px;
}
.component_wrap {
  display: inline-block;
  :deep(.el-select .el-input) {
    width: 150px;
  }
}
</style>
